<template>
<section>
        <div class="itop">
            <HomeCard v-for="item in list" :key="item.id" :data="item" />
        </div>
        <div class="icon"></div>
        <div class="ibot"></div>
    </section>
</template>
<script setup>
import HomeCard from '@/components/HomeCard/index.vue'

const list = [
    {
        icon: '',
        title: '今日订单收入',
        content: '259',
        info: '+1.2%同昨天对比',
        style: '--card-cyan-bg',
        style1: '--card-cyan1-bg',
        id: 1
    },
    {
        icon: '',
        title: '今日订单数量',
        content: '￥6666.88',
        info: '+1.2%同昨天对比',
        style: '--card-purple-bg',
        style1: '--card-purple1-bg',
        id: 2
    },
    {
        icon: '',
        title: '今日访客数',
        content: '259',
        info: '+1.2%同昨天对比',
        style: '--card-orange-bg',
        style1: '--card-orange1-bg',
        id: 3
    },
    {
        icon: '',
        title: '支付转化率',
        content: '10%',
        info: '+1.2%同昨天对比',
        style: '--card-red-bg',
        style1: '--card-red1-bg',
        id: 4
    }
]

</script>

<style scoped lang="less">
section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .itop {
        display: flex;
        align-items: center;
        justify-content: space-between;
        section:last-of-type {
            margin-right: 0;
        }
    }
}
</style>